<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>滑条控制Div动画</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="container">
            <h1>滑条控制Div动画</h1>

            <div class="control-panel">
                <label for="positionSlider">位置控制 (0-1):</label>
                <input type="range" id="positionSlider" min="0" max="1" step="0.01" value="0">
                <span id="sliderValue">0</span>

                <label for="animationDuration">动画时长 (ms):</label>
                <input type="range" id="animationDuration" min="100" max="2000" step="100" value="500">
                <span id="durationValue">500</span>

                <label for="animationDelay">动画延迟 (ms):</label>
                <input type="range" id="animationDelay" min="0" max="1000" step="100" value="0">
                <span id="delayValue">0</span>
            </div>

            <div class="animation-container">
                <div id="animatedBox" class="animated-box"></div>
            </div>
        </div>

        <script src="script.js"></script>
    </body>

</html>